<template>
	<!-- <page-meta background-text-style="light">
		<navigation-bar title="" background-color="#000000" front-color="#f2f3f5"/>
	</page-meta> -->
	<kui-page :customHeader="true">
		<template v-slot:body>
			<view>
				<view class="kui-flex kui-my-3">
					<text>选取主色：</text>
					<view class="kui-w-20 kui-h-6" :style="{
						backgroundColor: colorVal
					}"></view>
				</view>
				<view class="kui-my-2">
					<text class="kui-text-xl">亮色模式</text>
				</view>
				<template v-for="(item, index) in light" :key="index">
					<view class="kui-w-auto kui-h-8 kui-px-3 kui-flex kui-justify-between kui-items-center" :style="{
						backgroundColor: item
					}">
						<text :class="isDark(item) ? 'kui-text-white' : 'kui-text-black'">111</text>
						<text :class="isDark(item) ? 'kui-text-white' : 'kui-text-black'">{{ item }}</text>
					</view>
				</template>
				<view class="kui-my-2">
					<text class="kui-text-xl">暗色模式</text>
				</view>
				<template v-for="(item, index) in dark" :key="index">
					<view class="kui-w-auto kui-h-8 kui-px-3 kui-flex kui-justify-between kui-items-center" :style="{
						backgroundColor: item
					}">
						<text :class="isDark(item) ? 'kui-text-white' : 'kui-text-black'">111</text>
						<text :class="isDark(item) ? 'kui-text-white' : 'kui-text-black'">{{ item }}</text>
					</view>
				</template>
			</view>
		</template>
	</kui-page>
</template>

<script>
	// import color from '@/common/color';
	import Color from 'color';
	
	export default {
		data() {
			return {
				colorVal: '#00BC79',
				dark: [],
				light: []
			}
		},
		onLoad() {
			// console.log(`亮色主色：${color.generate.generate(this.colorVal, {list: true, dark: false})}`);
			// console.log(`暗色主色：${color.generate.generate(this.colorVal, {list: true, dark: true})}`);
			// this.light = color.generate.generate(this.colorVal, {list: true, dark: false});
			// this.dark = color.generate.generate(this.colorVal, {list: true, dark: true})
		},
		methods: {
			// 判断是否是暗色调
			isDark(color) {
				return Color(color).isDark();
			}
		}
	}
</script>

<style>
  
</style>
